<template>
    <div style="padding:10px;background-color: white;">
        <Search @submit="handleSearch" @reset="handleReset">
            <AFormItem label="方案名称" >
                <AInput  allowClear  v-model:value="state.formData.title" />
            </AFormItem>
            <AFormItem label="方案ID" >
                <AInput  allowClear  v-model:value="state.formData.id" />
            </AFormItem>
            <AFormItem label="门槛" >
                <ASelect  allowClear style="width: 200px;" v-model:value="state.formData.threshold">
                    <ASelectOption :value="thresholdEnum.Quantity">满数量</ASelectOption>
                    <ASelectOption :value="thresholdEnum.Amount">满金额</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="优惠方式" >
                <ASelect  allowClear style="width: 200px;"  v-model:value="state.formData.type">
                    <ASelectOption :value="preferentialEnum.Subtraction">减钱</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Discount">打折</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Special">特价</ASelectOption>
                    <ASelectOption :value="preferentialEnum.Gift">赠品</ASelectOption>
                </ASelect>
            </AFormItem>
            <AFormItem label="状态" >
                <ASelect  allowClear style="width: 200px;"  v-model:value="state.formData.status" :options="PlanSchemeStatusOptions"></ASelect>
            </AFormItem>
        </Search>
    </div>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div class="mb-10">
            <AButton type="primary"  @click="addPlanScheme">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columnsRef" bordered :pagination="false">
            <template #bodyCell="{record,column}">
                <template v-if="column.dataIndex==='actions'">
                <a-button @click="detailPlanScheme(record)">详情</a-button>
                  <!-- 待审核->审核 -->
                  <a-dropdown v-if="record.status===PlanSchemeStatusEnum.TOBEREVIEW">
                        <template #overlay>
                            <a-menu>
                            <a-menu-item key="1">
                               <div @click="updateStatus(record.id,PlanSchemeStatusEnum.REVIEWED)">同意</div>
                            </a-menu-item>
                            <a-menu-item key="2">
                               <div @click="updateStatus(record.id,PlanSchemeStatusEnum.REJECT)">驳回</div>
                            </a-menu-item>
                            </a-menu>
                        </template>
                        <a-button>
                            审核
                            <DownOutlined />
                        </a-button>
                        </a-dropdown>
                         <!-- 已审核|下架->上架 -->
                    <a-button v-if="[PlanSchemeStatusEnum.REVIEWED,PlanSchemeStatusEnum.DISABLED].includes(record.status)" type="text"
                     @click="updateStatus(record.id,PlanSchemeStatusEnum.ACTIVATED)">启用</a-button>
                     <!-- 上架->下架 -->
                     <a-button v-if="record.status===PlanSchemeStatusEnum.ACTIVATED" type="text"
                     @click="updateStatus(record.id,PlanSchemeStatusEnum.DISABLED)">禁用</a-button>
            </template>
            </template>
        </ATable>
        <Pagination :pagination="state.pagination" @change="pageChange"></Pagination>
    </div>
    <PlanSchemeModal v-if="state.planSchemeModalVisible" :currentScheme="state.currentScheme" @ok="planSchemeModalOk" @cancel="planSchemeCancel"></PlanSchemeModal>
</template>
<script lang="ts" setup>
import {reactive,h,ref,onMounted} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { CommontTypes } from "@/type/common";
import PlanSchemeModal from "./components/PlanSchemeModal.vue";
import { CrowdRangeEnum, GoodsCategoryTypes, PageResult, PlanSchemeStatusEnum, PlanSchemeStatusOptions, PlanSchemeTypes, ResponseVo, preferentialEnum, scopeEnum, thresholdEnum } from "@/type";
import { GoodsCategoryService, PlanSchemeService } from "@/service";

const state = reactive<{
    formData: Partial<PlanSchemeTypes.PlanSchemePage>,
    dataSource:PlanSchemeTypes.PlanSchemeTableData[],
    pagination:CommontTypes.IPagination,
    planSchemeModalVisible: boolean,
    currentScheme: Partial<PlanSchemeTypes.planSchemeItem>,
}>({
    formData:{},
    pagination:{
        pageNum:1,
        pageSize:10,
        total:0
    },
    dataSource:[],
    planSchemeModalVisible: false,
    currentScheme:{},
})

// id: number;

//         threshold: thresholdEnum;
//         type: preferentialEnum;
//         creator: string;
//         create_time: string;
//         updater: string;
//         update_time: string;

const columnsRef = ref([
    {title:"方案名称",dataIndex:"title"},
    {title:"促销对象",dataIndex:"scope",customRender({record}:{record:PlanSchemeTypes.PlanSchemeTableData}){
        if(record.scope === scopeEnum.WholeOrder)return "整单";
        if(record.scope === scopeEnum.Category)return "品类";
        if(record.scope === scopeEnum.Single)return "单品";
        }
    },
    {title:"参与人群",dataIndex:"scope",customRender({record}:{record:PlanSchemeTypes.PlanSchemeTableData}){
        if(record.crowdRange===CrowdRangeEnum.ALL)return "全部"
        if(record.crowdRange===CrowdRangeEnum.NEW)return "新人"
        if(record.crowdRange===CrowdRangeEnum.MEMBER)return "会员"
    }},
    {title:"状态",dataIndex:"status",customRender({record}:any){
        return PlanSchemeStatusOptions.find((item)=>{
           return item.value === record.status; 
        })?.label;
    }},
    {title:"创建人",customRender({record}:{record:Partial<PlanSchemeTypes.PlanSchemeTableData>}){
        return h('div',{},`${record.creator}/${record.createTime}`)
    }},
    {title:"修改人",customRender:({record}:{record:Partial<PlanSchemeTypes.PlanSchemeTableData>})=>{
        return h('div',{},`${record.updator}/${record.updateTime}`)
    }},
    {title:"操作",dataIndex:"actions"}
])

const handleSearch = async()=>{
    const res:ResponseVo<PageResult<PlanSchemeTypes.PlanSchemeTableData>>= await PlanSchemeService.pagePlanScheme({...state.formData,...state.pagination});
    if(res.code===0){
        state.dataSource = res.data.list;
        state.pagination.total = res.data.total;
    }
}

onMounted(()=>{
    handleSearch();
})

const handleReset = ()=>{
    state.formData = {};
    state.pagination.pageNum = 1;
}

const addPlanScheme = ()=>{
    state.planSchemeModalVisible = true;
}

const editPlanScheme = (record:PlanSchemeTypes.PlanSchemeTableData)=>{
    state.planSchemeModalVisible = true;
}

const planSchemeModalOk = ()=>{
    state.planSchemeModalVisible = false;
}

const planSchemeCancel = ()=>{
    state.planSchemeModalVisible = false;
    state.currentScheme = {};
}

const detailPlanScheme = async (record:PlanSchemeTypes.PlanSchemeTableData)=>{
    let res = await PlanSchemeService.detailPlanScheme(record.id);
    console.log("res--->",res);
    if(res.code===0){
        state.planSchemeModalVisible = true;
        state.currentScheme = res.data;
        if(state.currentScheme.scope===scopeEnum.Category){
            state.currentScheme.categories = res.data.categories?.map((item:any)=>item.categoryId) || []
        }
    }
}

const pageChange = ()=>{
    handleSearch();
}

const updateStatus =async (id: number,status:PlanSchemeStatusEnum)=>{
    let res = await PlanSchemeService.updateSchemeStatus(id,status);
    if(res.code===0){
        handleSearch();
    }
}


</script>